<template>
    <div id="wx_set">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>微信公众号设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="sign-box">
                <h5 class="hint">温馨提示:请前往您的公众号，按下方信息配置您的公众号，并将公众号的信息同步到下方表单保存</h5>
<!--                <div class="sign-item"><span>公众号名称 :公众号名称</span>-->
<!--                    <el-button type="danger" round size="small" @click="copyUrl('公众号名称')">点击复制-->
<!--                    </el-button>-->
<!--                </div>-->
                <div class="sign-item"><span>服务器地址(URL): http://你的域名/api/wechat/mp_server/0</span>
                    <el-button type="danger" round size="small"
                               @click="copyUrl('http://你的域名/api/wechat/mp_server/0')">点击复制
                    </el-button>
                </div>
<!--                <div class="sign-item"><span>令牌(Token): MLAsO0O0OwO0O0Oi </span>-->
<!--                    <el-button type="danger" round size="small" @click="copyUrl('MLAsO0O0OwO0O0Oi')">-->
<!--                        点击复制-->
<!--                    </el-button>-->
<!--                </div>-->
<!--                <div class="sign-item">-->
<!--                    <span>消息加解密方式: 明文模式 </span>-->
<!--                    <el-button type="danger" round size="small"-->
<!--                               @click="copyUrl('明文模式')">点击复制-->
<!--                    </el-button>-->
<!--                </div>-->
                <h5 class="hint">注意事项:</h5>
                <p>公众号一定是要经过认证服务号</p>
                <p>下方信息未配置成功前请勿开始推广</p>
            </div>
        </el-card>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="form" :label-width="this.$store.state.setLabelWidth" size="small">
                        <el-form-item label="公众号名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="url">
                            <el-input v-model="form.url"></el-input>
                        </el-form-item>
                        <el-form-item label="Token(令牌)">
                            <el-input v-model="form.token"></el-input>
                        </el-form-item>
                        <el-form-item label="EncodingAESKey">
                            <el-input v-model="form.encoding_aes_key"></el-input>
                        </el-form-item>
                        <el-form-item label="消息加解密方式">
                            <el-radio-group v-model="form.encrypt">
                                <el-radio label="1">明文模式</el-radio>
                                <el-radio label="2">兼容模式</el-radio>
                                <el-radio label="3">安全模式</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "wx_set",
    data() {
      return {
        form: {
          name: '',
          url: '',
          token: '',
          encoding_aes_key: '',
          encrypt: false,
        }
      }
    },
    created() {
        this.getData()
    },
    methods: {
      getData() {
        this.$axios.post('admin/wechat_official/get_config').then((res) => {
          this.form = res.data;
        });
      },
      onSubmit() {
        this.$axios.post('admin/wechat_official/set_config', {config: this.form}).then((res) => {
          this.$message.success('成功');
          this.getData()
        });
      },
      copyUrl(data) {
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value);
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message.success("复制成功");
        oInput.remove()
      },
    }
  }
</script>

<style scoped lang="less">
    .sign-box {
        width: 100%;
        background: #F5F8FD;
        padding-left: 10px;
        box-sizing: border-box;
        padding-bottom: 10px;

        .hint {
            line-height: 50px;
            color: #333333;
        }

        .sign-item {
            display: flex;
            flex-wrap: wrap;
            height: 40px;
            align-items: center;

            span {
                padding-right: 20px;
            }
        }

        p {
            line-height: 30px;
        }
    }
</style>